<template>
    <div>
        <!-- tab -->
        <el-tabs v-model="tabActiveName">
            <el-tab-pane v-for="{ name, label } in detailTabs" :key="name" :label="label" :name="name"></el-tab-pane>
        </el-tabs>
        <component :is="componentId"></component>
    </div>
</template>

<script setup>
import { ref, computed, defineAsyncComponent, reactive, watch } from 'vue';
import store from '@/store/index';

const detailTabs = [
    { name: 'rule', label: '积分规则' },
    { name: 'store', label: '积分商城' },
    { name: 'baseSetting', label: '基础设置' }
];
// const useAuth = store.useAuthStore();
// const permissions = useAuth.permissions;
// const auth = reactive([permissions.has('point_right:point_set'), permissions.has('point_right:point_mail')]);
let tabActiveName = ref('rule');
// if (auth[0] && auth[1]) {
//     tabActiveName.value = 'rule';
// } else if (auth[0]) {
//     tabActiveName.value = 'rule';
// } else if (auth[1]) {
//     tabActiveName.value = 'store';
// } else if (auth[2]) {
//     tabActiveName.value = 'baseSetting';
// }

const componentId = computed(() => {
    const defineAsyncComponents = {
        rule: defineAsyncComponent(() => import('./rule.vue')),
        store: defineAsyncComponent(() => import('./store.vue')),
        baseSetting: defineAsyncComponent(() => import('./baseSetting.vue'))
    };
    return defineAsyncComponents[tabActiveName.value] || null;
});
// const detailTabsCopy = computed(() => {
//     const tabs = [];
//     if (auth[0]) {
//         tabs.push(detailTabs[0]);
//     }
//     if (auth[1]) {
//         tabs.push(detailTabs[1]);
//     }
//     if (auth[2]) {
//         tabs.push(detailTabs[2]);
//     }
//     return tabs;
// });
</script>

<style lang="scss" scoped></style>
